<template>
  <div class="actives">
    <h1 class="fantasticAC">活动精选</h1>

    <ul class="infinite-list active-list" v-infinite-scroll="getAllActives">
      <li v-for="j in list" class="twoCards" :key="j[0].aid">
        <div class="card" v-for="i in j" :key="i.aid">
          <div class="pic" @click="open(i)">
            <img v-lazy="i.img" alt="">
          </div>
          <div class="intro">
            <span class="tag">【{{i.tag}}】</span>
            <span class="title">{{i.title}}</span>
          </div>
<!--          暂时没有用户id-->

          <!-- <div class="pick" @click="pick('tempUID', i, $event)">
            <span v-show="!i.picked">
              <img src="../../assets/imgs/icons/like.png" alt="">
            </span>
            <span style="color: red" v-show="i.picked">
              <img src="../../assets/imgs/icons/liked.png" alt="">
            </span>
            <span> {{i.pickNum}}</span>
          </div> -->
        </div>
      </li>
      
    </ul>
<!--    弹窗-->
    <mt-popup v-model="popupVisible" position="right" id="pop"> 
      <mt-header title="活动详情">
        <mt-button icon="back" slot="left" @click="close">返回</mt-button>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
      <div class="active-info">
        <div class="cover-img">
          <div class="active-publicer" style="background-size:cover;">
            <img class="publicer-img" :src="active.img" alt="">
            <div class="active-title">{{this.active.title}}(#{{this.active.aid}})</div>
          </div>
        </div>

        
        <el-descriptions  direction="vertical" :column="3" border>
          <el-descriptions-item label="活动简介" :span="3" contentStyle="height: 10vh;">{{this.active.introduce}}</el-descriptions-item>

          <el-descriptions-item label="发起者">{{this.active.uid}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{this.active.contact}}</el-descriptions-item>
          <el-descriptions-item label="人数限制">{{this.active.nowNum}}/{{this.active.maxNum}}</el-descriptions-item>
          <el-descriptions-item label="活动地点" :span="3">{{this.active.location}}</el-descriptions-item>
          
          <el-descriptions-item label="活动分类">{{this.active.tag}}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{this.active.beginTime}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{this.active.endTime}}</el-descriptions-item>

          <el-descriptions-item label="选项" :span="3" contentStyle="text-align:center;">
            <el-button type="primary" @click="join(active)">加入活动</el-button>
            <el-button type="danger" @click="quit(active)">退出活动</el-button>            
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { InfiniteScroll, MessageBox, Lazyload, Popup, Header} from 'mint-ui';
import Vue from "vue";
import active from '@/apis/active_operations'
import token from '@/apis/refresh_token'

Vue.use(InfiniteScroll)

export default {
  name: "ActivesCard",

  data() {
    return {
      // quickPickClick: 0,
      popupVisible: false,
      loading: false,
      pickMutexLock: false,
      isJoined: false,
      list: [
          // [
          //   {aid:1,title:'餐厅特惠',tag:'聚餐',pickNum:233, location:'西二门', img:'https://ds.js.design/assets/img/5faa892e3a88ccaf0e27ea97.png', picked:false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'1639055409000', endTime:'1640178614000'},
          //   {aid:2,title:'写代码',tag:'聚会',pickNum:233, location:'西二门', img:'https://img2.baidu.com/it/u=607470320,1665311922&fm=26&fmt=auto', picked:false, contact:'1617308593', introduce:'写代码！卷！冲啊！', maxNum:5, nowNum: 1, end:false, beginTime:'1639055409000', endTime:'1640178614000'},
          // ],
          // [
          //   {id:3,title:'一起学习',tag:'其他',pickNum:233, image:'https://img0.baidu.com/it/u=284349968,1317012594&fm=26&fmt=auto', picked: false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'1639055409000', endTime:'1640178614000'},
          //   {id:4,title:'看电影',tag:'电影',pickNum:233, image:'https://img1.baidu.com/it/u=1919988069,1634140951&fm=26&fmt=auto', picked: false, contact:'18788937085', introduce:'来吃饭吧', maxNum:10, nowNum: 5, end:false, beginTime:'1639055409000', endTime:'1640178614000'},
          // ]
      ],
      active: {},
      isEnd: false,
      isRequesting: false
    }
  },
  methods: {
  //  点赞发送ajax请求
    // pick(uid, i, e) {
    //   // console.log(e.currentTarget)
    //   // this.quickPickClick ++
    //   if(!this.pickMutexLock){
    //     //上锁
    //     this.pickMutexLock = true
    //     i.picked = !i.picked

    //     // if(i.picked) {
    //       // i.pickNum ++
    //       // e.style.width = e.style.width + 5 + 'px'
    //       // console.log(e.style)
    //     // }

    //     // else
    //       // i.pickNum --

    //     //异步，解锁
    //     let timeId = setTimeout(() => {
    //       this.pickMutexLock = false
    //       // this.quickPickClick = 0
    //       clearTimeout(timeId)
    //     }, 200)

    //     // this.$axios.post('')
    //     console.log('点赞功能测试，点赞对象编号为'+i.id)
    //   }
    //   else{
    //       MessageBox('提示','操作过于频繁~')
    //   }
    // },

    open (ACInfo) {
      console.log(ACInfo)
      this.active = ACInfo
      this.popupVisible = true
    },
    close () {
      this.popupVisible = false
    },
    formatTime(timeStamp) {
      let time = new Date(timeStamp),
          y = time.getFullYear(),
          m = time.getMonth()+1,
          d = time.getDate(),
          h = time.getHours(),
          mm = time.getMinutes(),
          s = time.getSeconds()
      return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s
    },

    join (a) { 
      if (a.nowNum >= a.maxNum) {
        this.$message.error('活动人数已满!')
        return  
      }
      token.request().then(() => {
        active.joinActive(a.aid, (data) => {
          if (data.code != 200) {
            this.popupVisible = false
            this.$message({
              message: '已经加入过活动了，请勿重复加入',
              type: 'error'
            })
          } else {
            this.popupVisible = false
            this.$message({
              message: '加入活动成功',
              type: 'success'
            })
          }
        })
      })
    },

    quit(act) {
      console.log(act)
      token.request().then(() => {
        if(localStorage.getItem('uid') == act.uid) {
          this.$message({
            message: '活动发起者不能退出自己的活动',
            type: 'error'
          })
          this.popupVisible = false
          return
        }
         
        active.quitActive(act.aid, (data) => {
          if (data.code != 200) {
            this.popupVisible = false
            this.$message({
              message: '你还没有加入活动',
              type: 'error'
            })
          } else {
            this.popupVisible = false
            this.$message({
              message: '退出活动成功',
              type: 'success'
            })
          }
        })
      })
    },
    getAllActives () {
      if (this.isEnd || this.isRequesting) { // 结束了，已经没有更多了 或者 已经发起请求了，需要避免重复请求
        return
      } 
      let that = this
      token.request().then(() => {
        that.isRequesting = true
        active.getActives(that.list.length / 3 + 1, false, false, 6, function (res) {
          that.isEnd = res.data.data.isEnd
          console.log(res)
          // 首页这个展示是两两一组的，所以这里先开一个临时数组，尽可能装两个
          let tempArr = []
          for (let i = 0; i < res.data.data.records.length; i ++) {
            if (i && i % 2 == 0) {
              that.list.push(tempArr)
              tempArr = []
            }
            // 非常丑陋的数据格式处理（为什么不封装一个函数啊喂）
            res.data.data.records[i].beginTime = res.data.data.records[i].beginTime.split('T')[0]
            res.data.data.records[i].endTime = res.data.data.records[i].endTime.split('T')[0]
            tempArr.push(res.data.data.records[i])
          }
          if (tempArr.length > 0) {
            that.list.push(tempArr)
          }
          that.isRequesting = false
        })
      })
    }
  },
  mounted() {
  //  this.getAllActives() // 因为滚动的时候会自动加载，所以不要在挂载时选择执行，否则会重复请求第一次的数据
  },
  components: {
    'mt-popup': Popup,
    'mt-header': Header
  }
}
</script>

<style scoped>
  .fantasticAC{
    margin: 1rem;
    text-align: left;
  }

  li.twoCards{
    /*border: 1px solid red;*/
    /*display: flex;*/
    /*justify-content: space-around;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 16vh;
    margin: 1rem 0 0 0;
    /* max-width: 100vw; */
    max-width: 100vw;
  }

  .card{
    /*width: 80%;*/
    /*height: 55%;*/
    max-width: 48vw;
    margin:  2px;
    border: 1px #e3e3e3 solid;
    border-radius: 5px;
    box-shadow: 1px 1px 20px #888;

  }
  /*发现一个诡异的bug，当display为flex时，当前元素如果没有指定宽/高（百分比不算）*/
  .pic{
    width: 100%;
    margin: 0.5rem 0 1rem 0;
    position: relative;
  }
  .pic>img{
    width: 90%;
    height: 12rem;
    border-radius: 5px;
    /*text-align: center;*/
    /*width: 100%;*/
  }
  .intro{
    /*margin: 0 0 0 0.5rem;*/

    text-align: left;
    /*font-family: Arial;*/
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
  }
  .pick{
    /*background-color: #ff8800;*/
    text-align: right;
    padding: 0 1rem 0 0;
  }
  .pick img {
    height: 1rem;
  }
  .mint-popup{
    /*display: inline-block;*/
    width: 100%;
    height: 100%;
    background-color: #e3e3e3;
  }
  .active-publicer{
    position: relative;
    width: 100%;
    height: 38vh;
    /* background: url("../../assets/imgs/pics/test1.png") no-repeat center center; */
    background-size: cover;
    background-color: #000;
    overflow: hidden;
    
  }
  .active-publicer img {
    width: 100%;
    height: 100%;
  }
  .active-title{
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: #fff3;
    backdrop-filter: blur(2px); */
    padding: 10px;
    /*line-height: 16rem;*/
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
  }
  .time.notEnd{
    color: #ff3700;
  }
 
  #pop {
    height: 100vh;
    overflow: scroll !important;
  }
  ul.active-list::after {
    
  }
</style>